<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机械工业购物主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: #ff5000;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            display: flex;
            align-items: center;
        }
        .navbar .logo span {
            margin-left: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }
        .navbar button {
            background-color: white;
            color: #ff5000;
            border: none;
            padding: 5px 10px;
            margin-left: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .search-bar input {
            width: 500px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
        }
        .search-bar button {
            padding: 10px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }
        .category-menu {
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }
        .category-menu a {
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
        }
        .carousel {
            width: 100%;
            height: 300px;
            background-color: #ddd;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
        }
        .carousel img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        .hot-products {
            margin: 20px 0;
            padding: 0 20px;
        }
        .hot-products h2 {
            font-size: 24px;
            margin-bottom: 20px;
            border-bottom: 2px solid #ff5000;
            display: inline-block;
        }
        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .product-item {
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px;
            text-align: center;
            padding: 10px;
        }
        .product-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .category-floor {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }
        .category-floor .floor-title {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .category-floor .floor-products {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="logo">机械工业</div>
    <div class="nav-links">
        <a id="index1Link" href="#">首页</a>
        <a id="userMessageLink" href="#">我的</a>
        <a id="cartLink" href="#">购物车</a>
    </div>
</div>
<div class="search-bar">
    <input type="text" id="searchInput" placeholder="搜索商品、店铺">
    <button onClick="search()">搜索</button>
</div>
<div class="category-menu" id="categoryMenu">
    <script>




        function loadCategories() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/api/categories', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var categories = JSON.parse(xhr.responseText);
                    var categoryMenu = document.getElementById('categoryMenu');
                    categories.forEach(function (category) {
                        var a = document.createElement('a');
                        a.href = '#';
                        a.textContent = category.name;
                        categoryMenu.appendChild(a);
                    });
                    var moreCategory = document.createElement('a');
                    moreCategory.href = `UserProductCategory?id=${getUserIdFromUrl()}`; // 更新这里，添加userId参数
                    moreCategory.textContent = '更多分类';
                    categoryMenu.appendChild(moreCategory);
                }
            };
            xhr.send();
        }

    </script>
</div>
<div class="carousel">
    <img src="/static/image/f.jpg" alt="轮播图">
</div>
<div class="hot-products">
    <h2>热销商品</h2>
    <div class="product-list" id="hotProductsList">
        <!-- 商品列表将通过 JavaScript 动态生成 -->
    </div>
</div>
<div class="category-floor">
    <h2>楼层分类展示</h2>
    <div id="floors"></div>
</div>
<script>
    function getUserIdFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }
    const userId = getUserIdFromUrl();
    const userMessageLink = document.getElementById("userMessageLink");
    const index1Link = document.getElementById("index1Link");
    const cartLink = document.getElementById("cartLink");
    userMessageLink.href = `userMessage?id=${userId}`;
    index1Link.href = `index1?id=${userId}`;
    cartLink.href =`cart?id=${userId}`;


    function search() {
        var name = document.getElementById('searchInput').value.trim();
        if (name !== '') {
            const userId = getUserIdFromUrl();
            window.location.href = 'search_results?keyword=' + encodeURIComponent(name) + '&userId=' + encodeURIComponent(userId);
        }
    }

    function loadFloors() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/categories?level=0', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var categories = JSON.parse(xhr.responseText);
                var floors = document.getElementById('floors');
                categories.forEach(function (category) {
                    var floor = document.createElement('div');
                    floor.className = 'category-floor';
                    var floorTitle = document.createElement('div');
                    floorTitle.className = 'floor-title';
                    floorTitle.textContent = category.name;
                    floor.appendChild(floorTitle);
                    var floorProducts = document.createElement('div');
                    floorProducts.className = 'floor-products';

                    var productsXhr = new XMLHttpRequest();
                    productsXhr.open('GET', `/api/floorProducts/${category.id}`, true);
                    productsXhr.onreadystatechange = function () {
                        if (productsXhr.readyState === 4 && productsXhr.status === 200) {
                            var products = JSON.parse(productsXhr.responseText);
                            products.forEach(function (product) {
                                const userId = getUserIdFromUrl();
                                var productItem = document.createElement('div');
                                productItem.className = 'product-item';
                                productItem.innerHTML = `
                                    <a href="productmessage?id=${product.id}&userId=${userId}">
                                        <img src="${product.iconUrl}" alt="${product.name}">
                                        <h3>${product.name}</h3>
                                    </a>
                                    <p>￥${product.price}</p>
                                `;
                                floorProducts.appendChild(productItem);
                            });
                        }
                    };
                    productsXhr.send();

                    floor.appendChild(floorProducts);
                    floors.appendChild(floor);
                });
            }
        };
        xhr.send();
    }

    function loadHotProducts(userId) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/hotproducts', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var products = JSON.parse(xhr.responseText);
                var hotProductsList = document.getElementById('hotProductsList');
                products.forEach(function (product) {
                    var productItem = document.createElement('div');
                    productItem.className = 'product-item';
                    productItem.innerHTML = `
                        <a href="productmessage?id=${product.id}&userId=${userId}">
                            <img src="${product.iconUrl}" alt="${product.name}">
                            <h3>${product.name}</h3>
                        </a>
                        <p>￥${product.price}</p>
                    `;
                    hotProductsList.appendChild(productItem);
                });
            }
        };
        xhr.send();
    }


    window.onload = function() {
        const userId = getUserIdFromUrl();
        loadCategories();
        loadFloors();
        loadHotProducts(userId);
    };

</script>
</body>
</html>
